﻿{% extends "layout.html" %}

{% block left %}
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li class="active"><a href="/">OverView</a></li>
  </ul>
</div>
{% endblock %}

{% block right %}
<!--右边展示-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  <h1 class="page-header">数据趋势图</h1>

  <div class="row placeholders">
        <!--展示区-->
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="col-xs-12 col-sm-8 col-lg-10 placeholder" style="height:500px;" id="main">

    </div>

  </div>
</div>
{% endblock %}

{% block echarts_js %}

<script type="text/javascript" >
    var looper_time = 10*1000;
    //是否首次执行
    var run_once=true;
    var datetime = []
    dodata();
    function dodata() {
        if(run_once){
          //如果是首次执行,则设置一个定时器,并且把首次执行置为false
          looper=setInterval(dodata,looper_time);
          run_once=false;
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '性能变化',
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                itemGap: 15,
                showTitle: true,
                feature: {
                    magicType: {
                        show:true,
                        title:{
                            line:'切换为折线图',
                            bar:'切换为柱状图',
                            stack:'堆积',
                            tiled:'平铺'
                        },
                        type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show:true, title:'重置'},
                    saveAsImage: {show:true, title:'保存为图片图'}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: datetime
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name:'CPU',
                    type:'line',
                    data:[],
                    barGap: 0,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'内存',
                    type:'line',
                    data:[],
                    barGap: 0,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
            ]
        };
        myChart.showLoading(); // 加载动画
        $.ajax({
            cache: false,
            type: "POST",
            url: "/get_date", //把表单数据发送到/weather
            data: null, // 发送的数据
            dataType : "json",  //返回数据形式为json
            async: false,
            error: function(request) {
                alert("发送请求失败！");
            },
            success: function(result) {
                //console.log(result);
                for (i = 0, max = result.data[0].length; i < max; i++) { //注意：result.data.length
                    option.series[0].data.push(result.data[0][i]);
                    option.series[1].data.push(result.data[1][i]);
                };
                option.xAxis.data = result.data[2]

                // 为echarts对象加载数据--------------
                myChart.hideLoading(); // 隐藏加载动画
                myChart.setOption(option);
            }
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = myChart.resize;

        myChart.on('click', function(param){
            var date_list = datetime;
            var name = param.name
            if (date_list.indexOf(name) > -1){
                window.location.href="/source_data/" + name;
            }
        })
    }
</script>
{% endblock %}